<template>
	<!-- 申诉历史列表 -->
	<scroll-view class="apply-history-scroll" scroll-y @scrolltolower="getList()" @refresherrefresh="getList(true)"
		:refresher-enabled="true" :refresher-triggered="refresherTriggered">
		<view class="apply-history">
			<view class="item-box" v-for="(item,index) in list" :key="index" @click="handleDetail(item)">
				<!-- 1:申诉失败；2:未处理；3:申诉成功 -->
				<view class="result" :status="statusArr[item.appealStatus].type">{{statusArr[item.appealStatus].text}}
				</view>
				<view class="label">申诉信息</view>
				<view class="flex-item" v-for="(col,index) in options[item.itemCode]">
					<view class="title">{{col.label}}</view>
					<view class="desc">{{col.format?col.format(item):item[col.prop]}}</view>
				</view>
			</view>
			<empty-waybill v-show="list.length==0&&!loading"></empty-waybill>
			<view class="get-more" v-show="andMore">
				加载中<text class="uni-icon">&#xe465;</text>
			</view>
			<view class="get-more" v-show="list.length&&!andMore">
				<text>没有更多了</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import emptyWaybill from "@/components/tool-empty/waybill";
	export default {
		components: {
			emptyWaybill
		},
		data() {
			return {
				statusArr: [{
					type: 2,
					text: '未处理'
				}, {
					type: 3,
					text: '申诉成功'
				}, {
					type: 1,
					text: '申诉失败'
				}],
				loading: false,
				refresherTriggered: false,
				list: [],
				pages: {
					size: 10, // 每次加载的数量
					current: 1, // 记录当前页
					total: '', // 记录总数
				},
				formData: {},
				tempData: {
					archiveCode: '',
					archiveName: '',
				},
				options: {
					pljs: [{
						label: '车牌号码',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生地点',
						prop: 'occurAddr',
					}, {
						label: '发生时间',
						prop: 'evalTime',
					}],
					ybcs: [{
						label: '车牌号码',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '超速地点',
						prop: 'occurAddr',
					}, {
						label: '超速时间',
						prop: 'evalTime',
					}],
					ydztczbgf: [{
						label: '运单号',
						prop: 'billNo',
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '描述',
						prop: 'description'
					}],
					jjwfsjkf: [{
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '案由',
						prop: 'cause'
					}],
					yzcf: [{
						label: '车牌号码',
						format: (item) => {
							let res = item.vehCode;
							if (item.vehColor) {
								res += '(' + item.vehColor + ')'
							}
							return res;
						},
					}, {
						label: '申诉项',
						prop: 'itemName',
					}, {
						label: '发生时间',
						prop: 'evalTime'
					}, {
						label: '案由',
						prop: 'cause'
					}],
				},

			}
		},
		computed: {
			andMore() {
				// 计算是否还有更多
				return this.pages.total !== this.list.length;
			},
		},
		methods: {
			// 点击详情
			handleDetail(item) {
				this.$goBack('appeal-detail?param=' + JSON.stringify(item))
			},
			// 加载，刷新
			getList(isRefresh) {
				if (isRefresh) {
					Object.assign(this.tempData, this.formData);
					this.pages.current = 1;
					this.list = [];
					this.refresherTriggered = true;
					this.$nextTick(() => {
						this.refresherTriggered = false;
					})
				} else {
					if (this.andMore) {
						this.pages.current++;
					} else {
						return;
					}
				}
				this.loading = true;

				const formData = {
					...this.tempData,
					...this.pages
				}
				// console.log(formData);
				this.$api.staffHisAppealAudit(formData).then(res => {
					this.loading = false;
					const resData = res.data.data;
					resData.orders.forEach(item => {
						if (item.occurAddr) {
							this.$api.getAddress(item.occurAddr).then(res => {
								item.occurAddr = res.data.regeocode.formatted_address || '-';
							})
						}
					})
					// this.list = resData;
					// this.pages.total = resData.length;
					this.list.push(...resData.orders);
					this.pages.total = resData.total;
				})
			},
		},
		onLoad() {
			const tempData = this.$store.getters.getTempData || {};
			const resData = tempData.resData || {};
			Object.assign(this.tempData, {
				archiveCode: resData.archiveCode,
				archiveName: resData.archiveName,
				// archiveCode: '341124197911201012',
				// archiveName: '张云',
			})
			// 页面初始化，请求一次数据
			this.getList(true);

		},
	}
</script>

<style lang="scss">
	@keyframes myMove {
		from {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg);
		}
	}

	.get-more {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;

		.uni-icon {
			vertical-align: middle;
			margin-left: 20rpx;
			font-size: 40rpx;
			animation: myMove 2s linear infinite;
		}
	}

	.apply-history-scroll {
		height: 100vh;
	}

	.apply-history {
		padding: 30rpx;

		.item-box {
			background: #FFFFFF;
			box-shadow: 0px 4rpx 6rpx 1px rgba(84, 83, 83, 0.16);
			border-radius: 16rpx;
			padding: 20rpx 30rpx 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.result {
				position: absolute;
				right: 0;
				top: 0;
				border-radius: 0 16rpx 0 16rpx;
				color: #fff;
				line-height: 50rpx;
				padding: 0 16rpx;

				&[status='1'] {
					background: #EB5459;
				}

				&[status='2'] {
					background: #F2BA38;
				}

				&[status='3'] {
					background: #2EB10F;
				}
			}

			.label {
				font-weight: bold;
				font-size: 28rpx;
				padding: 0 0 18rpx 10rpx;
				border-bottom: 1px solid #EEEEEE;
			}

			.flex-item {
				font-size: 26rpx;
				line-height: 36rpx;
				display: flex;
				padding-top: 24rpx;

				.title {
					color: #666;
					width: 5em;
				}

				.desc {
					flex: 1;
					color: #333;
					text-align: justify;

					.time {
						float: right;
						color: #999;
					}
				}
			}
		}
	}
</style>